<template>
    <transition name="toast">
        <div class="toast" v-show="showToast">
            <div class="toast-content">
                <div class="icon iconfont icon-correct"></div>
                <p class="msg">{{toastMsg}}</p>
            </div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
    import { mapGetters, mapMutations } from 'vuex'
    import { TOAST_SHOW_TIME } from 'common/js/config'

    export default {
        name: 'toast',
        created() {
            this.showToast = false
            this.timer = {}
        },
        computed: {
            ...mapGetters([
                'toastMsg'
            ])
        },
        methods: {
            ...mapMutations({
                setToastMsg: 'SET_TOAST_MSG'
            })
        },
        watch: {
            toastMsg(newMsg) {
                if (!newMsg) {
                    return
                }
                let _this = this
                this.showToast = true

                clearTimeout(this.timer)

                this.timer = setTimeout(() => {
                    _this.showToast = false
                    _this.setToastMsg('')
                }, TOAST_SHOW_TIME)
            }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"

    .toast-leave-active
        animation: leave .3s
    .toast-enter-active
        animation: bounce-in .3s
    @keyframes bounce-in
        0%
            opacity: 0
            transform: translateY(-50%) scale(.6)
        50%
            opacity: .8
            transform: translateY(-50%) scale(1.1)
        100%
            opacity: 1
            transform: translateY(-50%) scale(1)
    @keyframes leave
        0%
            opacity: 1
            transform: translateY(-50%) scale(1)
        100%
            opacity: 0
            transform: translateY(-50%) scale(.6)
    .toast
        position: fixed
        left: 0
        right: 0
        top: 50%
        transform: translateY(-50%)
        z-index: 500
        .toast-content
            box-sizing: border-box
            margin: 0 auto
            padding: 25px 8px
            width: 200px
            height: 130px
            text-align: center
            border-radius: 6px
            background: $color-text
            opacity: .7
            .icon
                display: block
                margin-bottom: 20px
                font-size: 33px
                color: $color-text-w-ll
            .msg
                line-height: 20px
                font-size: $font-size-medium-x
                color: $color-text-w
</style>